<template>
  <Search
    v-model="params.surveyName"
    class="z_index99"
    input-align="center"
    placeholder="请输入搜索关键词"
    @blur="setSearch"
  />
  <DropdownMenu>
    <DropdownItem
      v-model="params.sort"
      :options="sortOption"
      @change="setSearch"
    />
    <DropdownItem ref="item" title="创建部门" @close="setSearch">
      <div class="sections m15">
        <label
          v-for="item in sections"
          :key="item.value"
          :class="{ active: params.sections.includes(item.value) }"
          @click="checkSection(item)"
        >{{ item.text }}</label
        >
      </div>
    </DropdownItem>
  </DropdownMenu>
  <div class="list_content">
    <List
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        v-for="item in lists"
        :key="item.surveyId"
        class="survey_content"
        @click="handleJump(item)"
      >
        <VanImage
          :src="item.surveyLogo"
          fit="cover"
          height="6.5rem"
          width="9rem"
        />
        <div class="list_text">
          <h2 class="f16">{{ item.surveyName }}</h2>
          <p class="f12 mt05">已收集：{{ item.fillingNums }}</p>
          <p class="f12">时间：{{ gatherTime(item) }}</p>
        </div>
      </div>
    </List>
    <BackTop bottom="10vh" target=".list_content" />
  </div>
</template>
<script setup>
import { getList } from "@/server/business/survey.js";
import { formatDate } from "@/utils/common.js";
import { BackTop, DropdownItem, DropdownMenu, Image as VanImage, List, Search } from "vant";
import { reactive, ref, } from "vue";
import { useRouter } from "vue-router";

//defineOptions({ name: "SurveyList" });

const router = useRouter();
const lists = ref([]);
const loading = ref(false);
const finished = ref(false);
const params = reactive({
  pageNum: 1,
  pageSize: 10,
  surveyName: "",
  sortField: "create_time", //排序字段 时间:create_time 收集数量:collect_num
  sortFlag: "desc", // 排序规则 升序:asc 降序:desc
  sections: [""]
});
const sortOption = [
  { text: "默认排序", value: 0 },
  { text: "时间由近到远", value: 1 },
  { text: "时间由远到近", value: 2 },
  { text: "收集数排序", value: 3 }
];
const sections = [
  { text: "全部", value: "" },
  { text: "组织部", value: 1 },
  { text: "宣网部", value: 2 },
  { text: "基经部", value: 3 },
  { text: "权女部", value: 4 },
  { text: "服务部", value: 5 },
  { text: "财务部", value: 6 },
  { text: "委员会", value: 7 }
];
// 异步更新数据
const onLoad = () => {
  getSurveyList();
  params.pageNum++;
};
// 去搜搜
const setSearch = () => {
  params.pageNum = 1;
  getSurveyList();
};
// 获取列表
const getSurveyList = () => {
  getList(params).then((res) => {
    lists.value.push(...res.rows);
    loading.value = false; // 加载状态结束
    finished.value = lists.value.length >= res.total; // true 数据全部加载完成
  });
};
// 选择创建部门
const checkSection = (item) => {
  if (item.value === "") params.sections = [""]; // 选中‘全部’按钮
  else {
    let firstIndex = params.sections.indexOf("");
    if (firstIndex !== -1) params.sections.splice(firstIndex, 1); // 全部按钮置灰
    let index = params.sections.indexOf(item.value);
    if (index === -1) params.sections.push(item.value); // 添加选中按钮
    else params.sections.splice(index, 1); // 选中按钮置灰
  }
};
// 收集时间
const gatherTime = (item) => {
  const starDate = item.startDate
    ? formatDate(new Date(item.startDate), "yyyy-MM-dd hh:mm")
    : "";
  const endDate = item.endDate
    ? formatDate(new Date(item.endDate), "yyyy-MM-dd hh:mm")
    : "";
  return starDate + " - " + endDate;
};
// 跳转
const handleJump = (item) => {
  router.push({
    path: "/survey",
    query: { id: item.surveyId }
  });
};
</script>
<style lang="less" scoped>
.list_content {
  height: calc(100% - 102px);
  overflow: hidden;
  overflow-y: auto;

  .survey_content {
    display: flex;
    padding: 1.5rem 1.5rem 0;

    .list_text {
      width: 23rem;
      padding-left: 1rem;
      white-space: nowrap;

      h2 {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.sections {
  display: flex;
  flex-wrap: wrap;

  & > label {
    width: 10rem;
    height: 4rem;
    background: var(--van-gray-2);
    text-align: center;
    line-height: 4rem;
    margin: 0.5rem;

    &.active {
      color: var(--van-blue);
      background: #e2f4ff;
    }
  }
}

.z_index99 {
  position: relative;
  z-index: 99;
}
</style>
